<template>
	<view>
		<u-navbar title-color="#333" title-bold title-size="36" title="法学生认证" :border-bottom="false"></u-navbar>
		<view class="sz-div u-m-t-22 ">
			<view class="u-p-t-22 u-p-b-22 border_bottom_eee">
				<view class="font_16_333 font_weight">
					<span class="xing u-m-r-4">*</span> 请上传头像
				</view>
				<view class="font_12_999 u-m-t-8">
					为确保真实性，照片上传脸无遮挡更能提高通过率
				</view>
				<view class=" flex flex_sb u-m-t-10">
					<u-upload width="160" height="160" max-count="1" :form-data="formData" :max-size="1 * 1024 * 1024"
						:deletable="false" :action="action" :file-list="fileList" @on-success="onSuccess"></u-upload>
					<image class="sc-sfz" src="../../static/img/lawyerVersion/sc-sfz.png" mode="aspectFill"></image>
				</view>
			</view>

			<view class="item flex flex_sb">
				<view>姓名</view>
				<view class="u-m-r-4 item-vl">
					<u-input v-model="formList.name" input-align="right" />
				</view>
			</view>
			<view class="item flex flex_sb">
				<view>联系方式</view>
				<view class="u-m-r-4 item-vl">
					<u-input v-model="formList.mobile" input-align="right" />
				</view>
			</view>
			<view class="item flex flex_sb">
				<view class="">所在地区</view>
				<view class="flex" @click="showsr1 = true">
					<view class="u-m-r-4 item-vl" v-if="!address">
						请选择
					</view>
					<view class="font_14_333" v-if="address">
						{{address}}
					</view>
					<u-icon name="arrow-right" color="#333" size="24"></u-icon>
				</view>
			</view>
			<view class="item flex flex_sb">
				<view>学校名称</view>
				<view class="u-m-r-4 item-vl">
					<u-input v-model="formList.school_name" input-align="right" />
				</view>
			</view>
			<view class="item flex flex_sb">
				<view>学校地址</view>
				<view class="u-m-r-4 item-vl">
					<u-input v-model="formList.school_addr" input-align="right" />
				</view>
			</view>
			<view class="item flex flex_sb">
				<view>学校联系方式</view>
				<view class="u-m-r-4 item-vl">
					<u-input v-model="formList.school_phone" input-align="right" />
				</view>
			</view>

		</view>
		<view class="sz-div u-m-t-22">
			<view class="u-p-t-22">
				<view class="font_16_333 font_weight">
					<span class="xing u-m-r-4">*</span>证件信息
				</view>

			</view>
			<view class="item flex flex_sb">
				<view class="">学生证</view>
				<view class="flex" @click="ncShow = true">
					<view class="u-m-r-4 item-vl">
						{{formList.student_idcard_images?'已上传':'上传学生证，要求照片清晰可辨认'}}
					</view>
					<image class="rz-add" src="../../static/img/lawyerVersion/rz-add.png" mode="" @click="selzhaopian(3)">
					</image>
				</view>
			</view>
			<view class="item flex flex_sb">
				<view class="">毕业证</view>
				<view class="flex" @click="ncShow = true">
					<view class="u-m-r-4 item-vl">
						{{formList.student_graduate_images?'已上传':'上传毕业证，要求照片清晰可辨认'}}
					</view>
					<image class="rz-add" src="../../static/img/lawyerVersion/rz-add.png" mode="" @click="selzhaopian(4)">
					</image>
				</view>
			</view>
			<view class="item flex flex_sb">
				<view class="">身份证</view>
				<view class="flex" @click="ncShow = true">
					<view class="u-m-r-4 item-vl">
						{{formList.idcard_images?'已上传':'进行实名认证，确保本人操作账户安全'}}
					</view>
					<image class="rz-add" src="../../static/img/lawyerVersion/rz-add.png" mode="" @click="selzhaopian(2)">
					</image>
				</view>
			</view>
		</view>
		<!-- <u-picker :params="params" mode="region" v-model="showsr1" @confirm="regionconfirm1"></u-picker> -->
		<u-select v-model="showsr1" mode="mutil-column-auto" :list="addressList" @confirm="regionconfirm1" value-name="id" label-name="name"></u-select>
		<view class="" style="width: 100%;height: 170rpx;"></view>
		<view class="btn-bo">
			<button class="btn_login_btn" @click="submit">
				申请认证
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressList:[],
				
				params: {
					province: true,
					city: true,
					area: true
				},
				ncShow: false,
				// 演示地址，请勿直接使用
				action: '',
				fileList: [],
				images: [],
				formData: {
					token: uni.getStorageSync("token")
				},

				address: '',
				showsr1: false,
				
				formList:{
					token:uni.getStorageSync("token"),
					type:'2', //身份:1=律师,2=法学生
					name:'',
					avatar:'',
					area_id:'',//所在区域ID
					province: '',
					city: '',
					idcard_images:'',//身份证图片，多个图片用英文半角的逗号连接
					mobile:'',//联系方式(法学生)
					school_name:'',//学校名称(法学生)
					school_addr:'',//学校地址(法学生)
					school_phone:'',//学校联系方式(法学生)
					student_idcard_images:'',//学生证图片(法学生)，多个图片用英文半角的逗号连接
					student_graduate_images:'',//毕业证图片(法学生)
				}
			}
		},
		onLoad() {
			this.action = this.$config.uploadUrl
			this.getaddrerss()
		},
		onShow() {
			if(uni.getStorageSync("student_idcard_images")){
				this.formList.student_idcard_images = uni.getStorageSync("student_idcard_images")
			}
			if(uni.getStorageSync("student_graduate_images")){
				this.formList.student_graduate_images = uni.getStorageSync("student_graduate_images")
			}
			if(uni.getStorageSync("idcard_images")){
				this.formList.idcard_images = uni.getStorageSync("idcard_images")
			}
		},
		beforeDestroy() {
			uni.removeStorageSync('student_idcard_images')
			uni.removeStorageSync('student_graduate_images')
			uni.removeStorageSync('idcard_images')
		},
		methods: {
			getaddrerss(){
				this.$api({
					url: '/getChinaArea',
					method: 'get',
				}).then(res => {
					if (res.code == 1) {
						this.addressList = res.data
					}
				})
			},
			submit(){
				
				console.log(this.formList)
				if(!this.formList.name || !this.formList.avatar || !this.formList.area_id || !this.formList.mobile || !this.formList.school_name || !this.formList.school_addr || !this.formList.school_phone){
					uni.showToast({
						title: "基础信息请填写完整",
						icon: "none"
					});
					return
				}
				if(!this.formList.idcard_images || !this.formList.student_idcard_images || !this.formList.student_graduate_images){
					uni.showToast({
						title: "证件信息请上传完整",
						icon: "none"
					});
					return
				}
				
				this.$api({
					url: '/lawyer/authentication',
					method: 'post',
					data: this.formList,
				}).then(res => {
					if (res.code == 1) {
						uni.removeStorageSync('student_idcard_images')
						uni.removeStorageSync('student_graduate_images')
						uni.removeStorageSync('idcard_images')
						// uni.navigateTo({
						// 	url:"/pages/mine/renzhengResult"
						// })
						uni.showToast({
							title: "申请成功，请等待审核",
							icon: "none"
						});
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					}
				})
				
				
			},
			onSuccess(data, index, lists, name) {
				this.formList.avatar = data.data.path
			},
			regionconfirm1(e) {
				// this.address = e.province.label + e.city.label + e.area.label
				// this.formList.area_id = e.area.value
				this.address = e[0].label
				
				this.formList.province = e[0].value
				this.formList.city = e[1].value
				this.formList.area_id = e[2].value
			},
			
			
			selzhaopian(e){
				uni.navigateTo({
					url:"/pages/mine/renzhengLvshiIdcard?type="+e
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.xing {
		color: #FF0000;
	}

	.po-bikan {
		padding: 40rpx 32rpx;
		background: #F6F6F6;
		width: 100%;
		position: relative;

		.shuxian {
			height: 300rpx;
			width: 2rpx;
			border-left: 4rpx dashed #FA2D2D;
			position: absolute;
			left: 50rpx;
		}

		.bk-title {
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
		}

		.jine-div {
			width: 686rpx;
			// height: 504rpx;
			padding: 32rpx 24rpx;
			background: #FFFFFF;
			border-radius: 32rpx 32rpx 32rpx 32rpx;

			.jine-item {
				margin: 14rpx;
				width: 184rpx;
				height: 64rpx;
				background: #FFFFFF;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				border: 2rpx solid #E5E5E5;
				font-size: 28rpx;
				color: #000000;
				text-align: center;
				line-height: 64rpx;
			}

			.jine-item-sel {
				border: 2rpx solid #F40000;
				color: #F40000;
			}
		}
	}

	.sz-div {
		background-color: #fff;
		width: 686rpx;
		// height: 550rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 0 auto;
		padding: 0 24rpx;

		.sc-sfz {
			width: 432rpx;
			height: 128rpx;
		}

		.item {
			width: 100%;
			height: 110rpx;
			border-bottom: 1px solid #eee;

			.item-vl {
				font-size: 28rpx;
				color: #9695A3;
				width: 356rpx;
				text-align: right;
			}

			.rz-add {
				width: 48rpx;
				height: 48rpx;
				margin-left: 16rpx;
			}

			.headimg {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
			}
		}
	}

	.btn-bo {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 8rpx 2rpx rgba(0, 0, 0, 0.14);
		padding-top: 14rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9;

		.btn_login_btn {
			width: 686rpx;
			height: 90rpx;
			background: linear-gradient(180deg, #FA2D2D 0%, #F40000 100%);
			border-radius: 46rpx 46rpx 46rpx 46rpx;
			// margin-top: 116rpx;
			font-size: 36rpx;
			color: #fff;
			line-height: 90rpx;
			margin-left: 32rpx;
			text-align: center;
			font-weight: bold;
		}
	}

	.mxpo-div {
		width: 750rpx;
		// height: 1034rpx;
		background: #FFFFFF;
		padding: 80rpx 24rpx 40rpx;

		.mxt {
			color: #16053C;
		}

		.bob-btn {
			width: 688rpx;
			height: 88rpx;
			background: #651321;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			text-align: center;
			line-height: 88rpx;
			font-size: 36rpx;
			color: #FFF7D2;
		}
	}

	.jinji-item {
		margin-top: 36rpx;

		.jinji-text {
			font-size: 32rpx;
			color: #3F464E;
		}

		.jinji-input {
			width: 690rpx;
			height: 88rpx;
			background: #EDEDED;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-top: 24rpx;
			padding: 8rpx 24rpx;
		}

		.jinji-input2 {
			height: 268rpx;
		}
	}
</style>